<template>
  <div class="m">
    <div class="c">
      <div
        class="mixed"
        v-for="item in petmessage"
        :key="item.pmid"
        @click="details(item.pmid)"
      >
        <img :src="`${item.pic}`" />
        <div>
          <p>{{ item.petName }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      petmessage: [],
    };
  },
  mounted() {
    this.mao();
  },
  methods: {
    // 发送请求，加载宠物列表
    mao() {
      let params = { petType: "猫" };
      this.axios.post("/petmessage/type", params).then((res) => {
        console.log(res);
        this.petmessage = res.data.data;
      });
    },
    details(id) {
      // 点击卡片跳转到详情页方法
      this.$router.push(`/a/details?pmid=${id}`);
    },
  },
};
</script>

<style lang="css" scoped>
p {
  /* margin: 10px auto; */
  text-align: center;
}
.c {
  display: flex;
  flex-wrap: wrap;
}
.mixed {
  width: 45%;
  margin: 5px;
}

.mixed img {
  display: block;
  width: 100%;
  height: 140px;
  border-radius: 10%;
}
/* .mixed > div {
  margin-left: 20px;
} */
</style>